<template>
  <div class='video-wrap'>
    <!-- 插件检查放到项目全局检测 -->
    <div v-for="(v, vIndex) in videoList" :key="vIndex" :style="videoStyle[0] ? videoStyle[vIndex] : videoStyle" :index="vIndex"
      v-show="isdbel ? vIndex === activeIndex : vIndex < showScreen"
      :class="{'video-plugin': true, 'video-border': true, 'active-plugin': vIndex === activeIndex}"
      @drop.prevent.stop="handleDrop" @dblclick="dblclickVideo(vIndex)" @click="clickVideo(vIndex)">
        <object v-show="v.isInit" ref="object" type="application/x-webplayercontrol"></object>
        <!-- 快速云台按钮 -->
        <!-- 待定。。。。 -->

        <!-- 窗口的工具条 -->
        <Render v-if="hasToolbar" :render="render" :data="data" :node="node"></Render>

        <!-- 快速回放按钮 -->
        <!-- 抛出回放事件 -->

        <!-- 显示窗口编号 -->
        <div v-if="showNum" class="video-num">
          <iframe class="video-num-frame"></iframe>
          {{vIndex + 1}}
        </div>

        <!-- 快速上墙弹框 -->
        <!-- 抛出上墙事件 -->
    </div>
  </div>
</template>

<script>
import Render from './render'
import importApi from './videoApi'
export default {
  name: 'bs-video',
  props: {
    /**
     * videoType:     组件使用类型('预览', '回放', '电视墙', '报警') || '开流、关流...'.
     * pluginCount:   渲染视频窗口个数.
     * defaultscreen: 默认显示几个窗格.
     * hasToolbar:    预览窗口中的工具条是否显示.
     * hasPlatForm:   是否包含云台.
     * handleDrop:    是否支持拖放.
     * showNum:       是否显示编号
     */
    videoType: {
      type: [String, Array],
      default: '预览'
    },
    pluginCount: {
      type: Number,
      default: 1
    },
    defaultShowscreen: {
      type: Number,
      default: 1
    },
    render: {
      type: Function
    },
    hasToolbar: {
      type: Boolean,
      default: false
    },
    hasPlatForm: {
      type: Boolean,
      default: false
    },
    hasHandleDrop: {
      type: Boolean,
      default: false
    },
    showNum: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Render
  },
  data () {
    return {
      isdbel: false, // 双击全屏
      pluginApi: null,
      activeIndex: 0,
      showScreen: this.defaultShowscreen,
      videoList: []
    }
  },
  computed: {
    videoStyle () {
      let extract = Math.sqrt(this.showScreen)
      if (extract % 1 !== 0) {
        const styleArr = []
        extract = (this.showScreen === 8) ? 4 : 3
        for (let i = 0; i < this.showScreen; i++) {
          const _style = {}
          const temp = 1 / extract * 100
          const bigWd = (extract - 1) / extract * 100 + '%'
          _style.width = _style.height = (i === 0) ? bigWd : temp + '%'
          if (i > 1) {
            _style.position = 'absolute'
            _style.left = `${i % extract * temp}%`
            if (i < 4) {
              _style.left = bigWd
              if (i === 3 && extract === 3) {
                _style.left = 0
              }
              _style.top = `${parseInt(i - 1) * temp}%`
            } else {
              _style.top = bigWd
            }
          }
          styleArr.push(_style)
        }
        return styleArr
      }
      return {width: 1 / extract * 100 + '%', height: 1 / extract * 100 + '%'}
    }
  },
  watch: {
    defaultShowscreen (val) {
      this.showScreen = val
    }
  },
  methods: {
    computeVideoList () {
      for (let i = 0; i < this.pluginCount; i++) {
        this.videoList.push({
          isInit: false, // 是否初始化
          isPlay: false, // 正在播放
          isStopped: true, // 播放完毕
          isBoost: false, // 鸟瞰状态
          isVolumeOpen: false, // 伴音
          isRecording: false, // 录像
          isCentreRecording: false, // 录像
          isSpeech: false, // 对讲
          isFrame: false, // 逐帧、I帧
          isPoll: false,
          isFullScreen: false,
          volumeValue: 0,
          streamType: 'main', // 流类型
          speed: '1', // 播放速度
          scale: '自适应', // 显示模式
          index: i
        })
      }
    },
    checkInit (index) {
      if (!this.videoList[index].isInit) {
        this.videoList[index].isInit = true
        this.$nextTick(this.initPlugin)
        // const api = importApi(this.$refs.object[this.activeIndex], this.videoType)
        // console.log(api)
        // api.open()
      }
    },
    /**
     * 初始化组件
     * 用v-show渲染object
     * 1.虽然初始化需要渲染大量dom
     * 2.但是importApi只需要一次(所有插件公用一套api)
     */
    initPlugin () {
      const plugin = this.$refs.object[this.activeIndex]
      if (plugin.valid) {
        this.pluginAPI = importApi(plugin, this.videoType)
        // this.pluginApi.SetMouseStatusCallback(this.pluginClickEvent)
        // this.pluginApi.SetKeyboardCallback(this.pluginEscCall)
        // this.pluginApi.SetNotifyCallback(() => {
        //   this.$parent.$emit('playEnd', this.index)
        // })
      }
    },
    handleDrop (data) {
      if (!this.hasHandleDrop) {
        return
      }
      if (/^\{.*\}$/.test(data)) {
        const fav = JSON.parse(data)
        if ('creator' in fav && fav.children && fav.children.length > 0 && fav.ispolling === 'true') {
          this.paramlist = []
          fav.children.forEach(item => {
            if ('eid' in item) {
              this.paramlist.push({
                id: item._id,
                type: 'video',
                streamType: this.pluginState.streamType,
                ip: item.eid.ip,
                port: item.eid.cport,
                channel: item.chan,
                vendor: item.eid.manufacturer
              })
            }
          })
          if (this.paramlist.length > 0) {
            this.pollNum = 0
            this.isPolling = true
            this.pluginState.isPoll = true
          }
        }
      }
    },
    clickVideo (index) {
      this.activeIndex = index
      // this.checkInit(index)
      if (this.showScreen === 6 || this.showScreen === 8) {
        this.activeIndex = 0
        let start = JSON.parse(JSON.stringify(this.videoList[0]))
        let change = JSON.parse(JSON.stringify(this.videoList[index]))
        this.videoList[0] = change
        this.videoList[index] = start
        console.log('videoList first', this.videoList[0].index)
      }
    },
    dblclickVideo (index) {
      this.activeIndex = index
      if (this.defaultShowscreen !== 1 && this.showScreen !== 1) {
        this.showScreen = 1
        this.isdbel = true
      } else {
        this.isdbel = false
        this.showScreen = this.defaultShowscreen
      }
    }
  },
  created () {
    this.computeVideoList()
  }
}
</script>

<style scoped>
.video-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  border: 1px solid #000;
  position: relative;
}
.video-plugin {
  background: #ccc;
  border: 2px solid #000;
  padding: 10px
}
.active-plugin {
  border: 2px solid #4699f9;
}
.video-num {
  height: 100%;
  width: 100%;
  font-size: 24px;
  z-index: 100;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
}
.video-num-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 99;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  border: 0 none;
}
</style>
